<template>
  <page>
    <div id="bg">
      <div class="login-logo">
        <div class="logo-wrap">
          <img class="ignore" src="../../static/images/login/logo4.png" alt="">
        </div>
      </div>
      <div class="login-form">
        <m-input type="text" placeholder="账号" v-model="form.account"></m-input>
        <m-input type="password" placeholder="密码" v-model="form.password"></m-input>
        <m-button color="#b4272d" styles="margin-top:28px" @click.native="loginHandler">
          <span>登录</span>
        </m-button>
      </div>
    </div>

  </page>
</template>

<script type="text/ecmascript-6">
  import {mapState, mapActions, mapMutations} from 'vuex'
import session from '@/libs/session'
import {toast} from '@/libs/cube-ui'
import * as types from "../../logic/user/mutation-types";
export default {
  data () {
    return {
      form: {
        account: '',
        password: ''
      }
    }
  },
  computed: {
    ...mapState('common', ['identifyingCode'])
  },
  methods: {
    ...mapActions('common', ['getIdentifyingCode']),
    ...mapActions('user', ['login']),
    loginHandler () {
      this.doRequest.post('login',this.form).then(ret=>{
        if (ret.success) {
          session.setToken(ret.data)
          toast('登录成功', 'correct')
          this.$go('/home')
        } else {
          toast(ret.errors.message, 'warn')
        }
      })
      // this.login(this.form).then(res => {
      //   res && this.$go('/home')
      // })
    }
  }
}
</script>

<style lang="less" scoped>
  @import '../../static/less/index';

  #bg{
    width: 100%;
    height: 100%;
    background: url("../../static/images/login/bg.jpg") no-repeat;
    background-size:100% 100%;

  }
  .login-logo {
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 410px;
    .logo-wrap {
      display: inline-block;
      width: 500px;
      height: auto;
      .ignore {
        width: 100%;
        height: 100%;
      }
    }
  }
  .login-form{
    padding:0 27px;
    .input-verify{
      span{
        color:#999;
      }
    }
  }
</style>
